<template>
  <el-container class="documentIpt_all">
    <el-header class="documentIpt_header" height="180px">
      <p>课程知识图谱</p>
      <!--      <el-breadcrumb
          class="p_bottom"
          separator=">>">
        <el-breadcrumb-item :to="{ path: '/' }">HOME</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'documentIpt' }">FILE-UPLOAD</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'showDocument' }">FILE-PREVIEW</el-breadcrumb-item>
        <el-breadcrumb-item>DISPLAY-GRAPH</el-breadcrumb-item>
      </el-breadcrumb>-->
    </el-header>
    <el-main class="documentIpt_main">
      <div class="content_container" v-loading="loading" style="padding-top: 13%">
        <div ref="chartRef" id="jsmind_container" class="tree-chart" style="width: 98%; height: 100%; overflow: auto"></div>

        <!--原知识图谱 -->
        <!--        <div-->
        <!--          class="content"-->
        <!--          ref="chartContainer">-->
        <!--          <div class="reload-container">-->
        <!--            <img-->
        <!--              v-if="!showReloadButton"-->
        <!--              src="../assets/loading.gif"-->
        <!--              alt="加载中"-->
        <!--              class="reload-image" />-->
        <!--            <p v-if="!showReloadButton">拼命加载中。。。</p>-->
        <!--            <img-->
        <!--              v-if="showReloadButton"-->
        <!--              src="../assets/rerun.gif"-->
        <!--              alt="重新加载"-->
        <!--              class="reload-image" />-->
        <!--            <a-->
        <!--              v-if="showReloadButton"-->
        <!--              @click="reloadChart"-->
        <!--              class="reload-link"-->
        <!--              >加载失败，点击重新加载</a-->
        <!--            >-->
        <!--          </div>-->
        <!--        </div>-->
      </div>

      <!--      <div style="margin-bottom:100px;background-color: red;width: 900px;height: 900px ">-->
      <!--        &lt;!&ndash; 假设我们有一个按钮来触发发送数据和显示词云 &ndash;&gt;-->
      <!--        <button @click="generateWordCloud">生成词云</button>-->
      <!--        &lt;!&ndash; 用于显示词云的图片元素 &ndash;&gt;-->
      <!--        <img v-if="wordcloudUrl" :src="wordcloudUrl" alt="Word Cloud" />-->
      <!--      </div>-->

      <div class="buttons-container">
        <el-button size="large" type="primary" class="documentIpt_btn" @click="downloadImage">下载图谱</el-button>
        <el-button size="large" type="primary" class="documentIpt_btn" @click="goToDocumentIptPage">重新生成</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { computed, onMounted, reactive, Ref, ref, watch } from 'vue'
// import { genFileId } from 'element-plus'
// import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { Document, UploadFilled } from '@element-plus/icons-vue'
// import Neovis from "neovis.js";
// import DocumentIpt from "@/views/DocumentIpt.vue";
import NeoVis from 'neovis.js'
import * as echarts from 'echarts'
// import data from '../assets/js/result_auto.json'
import { ElMessage } from 'element-plus'
import axios from 'axios'
var neo4j = require('neo4j-driver')
import 'jsmind/style/jsmind.css'
// @ts-ignore
import jsMind from 'jsmind'

interface Chapter {
  content: string[]
  title: string
}
interface TreeNode {
  name: string
  children?: TreeNode[]
}
// 定义 jsonData 的类型
type JsonData = Chapter[]

// 后端返回的数据类型
interface BackendNode {
  name: string
  description?: string
  children?: BackendNode[]
}

// 前端图表需要的数据类型
interface FrontendNode {
  name: string
  description: string
  symbolSize: number
  label: {
    fontSize: number
    color: string
  }
  itemStyle: {
    color: string
    borderColor: string
    borderWidth: number
    normal: {
      color: string
    }
  }
  lineStyle: {
    color: string
    width: number
    type: string
  }
  children?: FrontendNode[]
}
export default {
  name: 'DisplayGraph',
  components: { Document, UploadFilled },

  setup() {
    const { useStore } = require('../store/index.js')
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const goToDocumentIptPage = function () {
      loading.value = true
      if (route.query.courseId) {
        fetchData(route.query.courseId as string)
      }
    }

    // 定义响应式状态
    const loading = ref(true)
    const echartsData = ref<any[]>([]) // 用于存储处理后的数据
    const nodesRelation = ref<any[]>([]) // 关系线数据
    const category = ref<any[]>([]) // 图例数据
    const records = ref<any[]>([]) // 存储查询结果的数组
    const chartContainer = ref<HTMLDivElement | null>(null) // 用于存储 ECharts 容器 DOM 元素的引用
    const dataReady = ref(false) // 标志变量，表示数据是否准备好
    const showReloadButton = ref(false) // 控制重新加载按钮的显示
    const jsonData = ref<JsonData>([])
    const wordcloudUrl = ref('')
    const chartRef = ref<HTMLDivElement | null>(null)
    let chart: echarts.ECharts | null = null

    /* const data = {
      name: "计算机网络相关知识点",
      children: [
        {
          name: "计算机网络在信息时代的作用",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "网络在信息化中的地位",
              description: "21世纪特征是数字化、网络化和信息化，网络是信息时代核心，计算机网络在信息化过程中发展最快且起核心作用，是信息社会命脉和发展知识经济重要基础。"
            },
            {
              name: "网络融合趋势",
              description: "电信网络、有线电视网络和计算机网络服务范围有融合趋势如‘三网融合’，但存在经济利益和行政管辖权等问题。"
            },
            {
              name: "Internet情况",
              description: "Internet是全球最大最重要计算机网络，本书从第7版开始采用‘互联网’译名。"
            }
          ]
        },
        {
          name: "互联网的基本特点",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "连通性",
              description: "互联网使上网用户之间，不管相距多远，都可便捷、经济地交换各种信息，与传统电信网络连通性有区别，且具有虚拟特点。"
            },
            {
              name: "共享",
              description: "指资源共享，包括信息、软件、硬件共享，如互联网上服务器存储的电子文档可供用户读取或下载。"
            }
          ]
        },
        {
          name: "互联网的应用及影响",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "常见应用",
              description: "应用范围不断扩大，如上网玩游戏、看视频、社交通信、网购、网上银行等，改变了很多传统生活方式。"
            },
            {
              name: "互联网＋",
              description: "是一种新经济形态，把互联网成果融合到各领域，提升了实体经济创新力和生产力。"
            },
            {
              name: "负面影响及应对",
              description: "对各行各业产生冲击，如迫使传统业务退出市场、实体商店停业等，可通过加强管理使其正面作用成为主流。"
            }
          ]
        },
        {
          name: "互联网的概述及相关概念",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "网络概念",
              description: "‘网络’常是‘计算机网络’的简称，由若干节点和连接节点的链路组成，节点可以是计算机、集线器等。"
            },
            {
              name: "互连网概念",
              description: "是‘网络的网络’，由多个网络通过路由器连接而成。"
            },
            {
              name: "主机与路由器",
              description: "与网络相连的计算机常称为主机，路由器是一种特殊计算机但不能称为主机。"
            }
          ]
        },
        {
          name: "互联网基础结构发展阶段及趋势",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "发展阶段情况",
              description: "文中先对互联网进行概述，包括互联网基础结构发展的三个阶段（此处未详细展开具体阶段内容）。"
            },
            {
              name: "发展趋势情况",
              description: "提及今后有发展趋势方面的介绍（未详细展开具体趋势内容）。"
            }
          ]
        },
        {
          name: "互联网组成部分",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "边缘部分作用",
              description: "讨论互联网组成的边缘部分和核心部分，包含边缘部分的作用等相关内容（未详细展开具体作用内容）。"
            },
            {
              name: "核心部分作用",
              description: "包含互联的核心部分的作用等相关内容（未详细展开具体作用内容）。"
            },
            {
              name: "分组交换概念",
              description: "涉及分组交换的概念（未详细展开具体概念内容）。"
            }
          ]
        },
        {
          name: "计算机网络在我国的发展及类别",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "在我国发展情况",
              description: "简单介绍了计算机网络在我国的发展情况（未详细展开具体发展情况内容）。"
            },
            {
              name: "计算机网络类别",
              description: "提及计算机网络的类别（未详细展开具体类别内容）。"
            }
          ]
        },
        {
          name: "计算机网络的体系结构",
          symbolSize: 16,
          label: {
            fontSize: 16,
            color: "#000"
          },
          itemStyle: {
            color: "#ff0000",
            borderColor: '#0000ff',
            borderWidth: 3,
            normal: {
              color: "#00ff00"
            }
          },
          lineStyle: {
            color: "#888",
            width: 4,
            type: 'dotted'
          },
          children: [
            {
              name: "分层次体系结构",
              description: "论述计算机网络分层次的体系结构，包含协议和服务的概念，虽难在未了解具体网络前完全掌握，但能指导后续学习。"
            },
            {
              name: "协议概念",
              description: "涉及协议概念（未详细展开具体概念内容）。"
            },
            {
              name: "服务概念",
              description: "涉及服务概念（未详细展开具体概念内容）。"
            }
          ]
        }
      ]
    };*/

    // 定义数据结构的类型
    interface NodeData {
      name: string
      description?: string
      value?: number
      isLeaf?: boolean // 标记是否是叶子节点
      children?: NodeData[]
    }

    // 定义 ECharts tooltip 的参数类型
    interface TooltipParams {
      data: NodeData
      name: string
    }
    const initChart = (treeData: FrontendNode | null) => {
      console.log(chartRef.value)
      if (!chartRef.value) return

      chart = echarts.init(chartRef.value)

      /*    const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: function (params: TooltipParams) {
            // 判断节点是否有 description
            const description = params.data.description;
            return description ? description : params.name;
          }
        },
        series: [{

          type: 'tree',
          initialTreeDepth: -1,
          data: [treeData],
          top: '1%',
          left: '7%',
          bottom: '1%',
          right: '20%',
          symbolSize: 10,
          // 启用漫游缩放和平移
          roam: true,
          label: {
            normal: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              color: 'black'
            }
          },

          leaves: {
            label: {
              normal: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left',
              }
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0,
                    color: 'red'
                  }, {
                    offset: 1,
                    color: 'blue'
                  }],
                  globalCoord: false
                }
              }
            }
          }
        }]
        , dataZoom: [
          {
            type: 'slider',
            show: true,
            realtime: true,
            start: 0, // Start zoom at 0%
            end: 50, // End zoom at 100%
            handleSize: '8%', // Size of the handle
            bottom: 10 // Positioning the slider at the bottom
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },

        ]
      }
*/
      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',

            data: [treeData],

            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',

            symbolSize: 7,

            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9
            },

            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },

            emphasis: {
              focus: 'descendant'
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      chart.setOption(option)
    }

    const handleResize = () => {
      chart?.resize()
    }
    jsonData.value = store.chap
    //jsonData.value = JSON.parse(store.chap);
    // 使用computed来计算只包含content.value的字符串数组
    const contentValues = computed(() => {
      if (jsonData.value && jsonData.value.length > 0) {
        // 使用flatMap来展平content数组，并只取value字段
        return jsonData.value.flatMap(chapter => chapter.content.map(cont => cont))
      }
      // 如果没有数据，返回一个空数组
      return []
    })
    console.log('contentValues', contentValues)
    // 发送文本到后端并获取词云图片的URL
    // 发送文本到后端并获取词云图片的URL
    const generateWordCloud = async () => {
      try {
        // 发送POST请求到Flask后端
        const response = await axios.post(
          `${store.apiBaseURI}/wordcloud`,
          {
            text_array: contentValues.value
          },
          {
            responseType: 'blob' // 告诉axios期望返回的数据类型为blob
          }
        )

        // 创建Blob URL
        wordcloudUrl.value = URL.createObjectURL(new Blob([response.data], { type: 'image/png' }))
        console.log('##########', wordcloudUrl.value)
      } catch (error) {
        console.error('Error fetching wordcloud:', error)
      }
    }
    const treeContainer = ref<HTMLDivElement | null>(null)

    //原有的图表
    // const initChart = () => {
    //   console.log("no")
    //   if (chartContainer.value) {
    //     console.log("yes")
    //     const chart = echarts.init(chartContainer.value);
    //     const option = {
    //       title: {
    //         text: "图谱显示",
    //       },
    //       tooltip: {
    //         show: true, // 显示提示框
    //         formatter: function (x: { dataType: string; data: { label: any } }) {
    //           // x参数包含触发提示框的图形的数据信息
    //           if (x.dataType === "node") {
    //             // 如果是节点
    //             return x.data.label; // 显示节点的名称
    //           } else if (x.dataType === "edge") {
    //             // 如果是边
    //             return x.data.label; // 显示边的名称
    //           }
    //         },
    //       },
    //
    //       series: [
    //         {
    //           categories: category,
    //           type: "graph",
    //           layout: "force", // 使用力引导布局
    //           force: {
    //             // repulsion: 1000, // 增加斥力
    //             // edgeLength: 200 // 增加边长
    //             repulsion: 800, // 节点之间的斥力
    //             edgeLength: 400, // 边的长度
    //             gravity: 0.1, // 引力
    //             initLayout: "none",
    //           },
    //           animation: false,
    //
    //           data: echartsData.value,
    //           links: nodesRelation.value,
    //           // data: data.nodes,
    //           // links: data.links,
    //           roam: true, // 开启拖拽和缩放
    //
    //           label: {
    //             show: true,
    //             position: "inside",
    //             // formatter: '{b}'
    //             // 设置 minZoom 和 maxZoom 来控制标签的显示
    //             minZoom: 1.5, // 缩小到一定程度后，标签将不再显示
    //             maxZoom: 0.5, // 放大到一定程度后，标签将开始显示
    //             formatter: function (x: { data: { label: any } }) {
    //               return x.data.label;
    //             },
    //           },
    //           symbolSize: 60,
    //
    //           edgeSymbol: ["circle", "arrow"],
    //           edgeSymbolSize: [4, 10],
    //           edgeLabel: {
    //             normal: {
    //               show: true,
    //               position: "middle",
    //
    //               formatter: function (x: { data: { label: any } }) {
    //                 return x.data.label;
    //               },
    //             },
    //           },
    //
    //           lineStyle: {
    //             opacity: 1, // 设置线的透明度
    //           },
    //         },
    //       ],
    //     };
    //     // console.log('Links data:', option.series[0].links);
    //     console.log(option.series);
    //     console.log("categories", category);
    //     chart.setOption(option);
    //     console.log("ok");
    //     showReloadButton.value = false; // 初始化成功后，不需要显示重新加载按钮
    //   } else {
    //     // 如果数据未准备好，显示重新加载按钮
    //     showReloadButton.value = true;
    //   }
    // };
    const reloadChart = () => {
      // 重新加载图谱的代码
      showReloadButton.value = false

      // // 重新执行Cypher查询和初始化图表
      // var query = 'MATCH p=()-->() RETURN p';
      // // var query = 'MATCH p=()-[r:`发生年份`]->() RETURN p LIMIT 25';
      // executeCypher(query);
      // setTimeout(() => {
      //   initChart();
      // }, 5000); // 等待 500 毫秒后初始化 ECharts
      // const route = useRoute();
      //
      // const jsonDataString = route.query.jsonData;
      // if (typeof jsonDataString === "string" && jsonDataString) {
      //   try {
      //     const data = JSON.parse(jsonDataString);
      //     echartsData.value = data.nodes;
      //
      //
      //     nodesRelation.value = data.links;
      //
      //     console.log("Received JSON data:", data);
      //   } catch (error) {
      //     console.error("Error parsing JSON data:", error);
      //     showReloadButton.value = true;
      //   }
      // }
    }

    onMounted(() => {
      // var query = 'MATCH p=()-->() RETURN p';
      // // var query = 'MATCH p=()-[r:`发生年份`]->() RETURN p LIMIT 25';
      // executeCypher(query);
      // setTimeout(() => {
      //   initChart();
      // }, 5000); // 等待 5000 毫秒后初始化 ECharts

      // const route = useRoute();
      //
      // const jsonDataString = route.query.jsonData;
      //
      // if (typeof jsonDataString === "string" && jsonDataString) {
      //   try {
      //     const data = JSON.parse(jsonDataString);
      //     echartsData.value = data.nodes;
      //     nodesRelation.value = data.links;
      //     console.log("data.nodes是", data.nodes);
      //     console.log("Received JSON data:", data);
      //   } catch (error) {
      //     console.error("Error parsing JSON data:", error);
      //     showReloadButton.value = true;
      //   }
      // }
      // fetchData('1890678883414458369')
      const course_id = route.query.course_id // 获取路由参数
      console.log(route)
      console.log(course_id)
      if (course_id) {
        fetchData(course_id as string) // 传递参数 id 获取数据
      }
    })

    const options = {
      container: 'jsmind_container',
      theme: 'success',
      view: {
        draggable: true,
        hide_scrollbars_when_draggable: true,
        zoom: {
          min: 0.5,
          max: 5.0,
          step: 0.1
        },
        line_width: 1
      }
    }

    const jsmindData = reactive({
      meta: {
        name: 'education',
        author: 'glj',
        version: '0.1'
      },
      format: 'node_array',
      data: []
    })

    const fetchData = async (id: string) => {
      try {
        const response = await axios.post(`http://111.63.183.17:5000/Graphdata?course_id=` + id, {})

        // 将对象转换为 JSON 字符串
        if (response.data.status == false) {
          ElMessage({
            message: '生成图谱失败',
            type: 'error'
          })
          loading.value = false
        }
        loading.value = false

        // const data = response.data
        // const transformedData = transformData(data)
        // console.log('111', transformedData)
        // console.log(JSON.stringify(transformedData))
        // initChart(transformedData)
        const data = dataToJsmind(response.data)
        jsmindData.data = data
        var jm = new jsMind(options)
        jm.show(jsmindData)
      } catch (error) {
        ElMessage({
          message: '生成图谱失败',
          type: 'error'
        })
        loading.value = false
      }
    }

    // 将后端返回的格式转换为 jsmind 格式
    const dataToJsmind = function (sourceData: any) {
      // 把映射关系保存到数组中
      let linkArr: any[] = []
      sourceData.links.forEach((element: any) => {
        linkArr[element.target] = element.source
      })
      sourceData.nodes.forEach((element: any) => {
        element.expanded = false
        element.topic = element.name
        element.id = element.id + ''
        if (element.description === '知识体系根节点') {
          element.isroot = true
        } else {
          element.parentid = linkArr[element.id] + ''
        }
        delete element.description
        delete element.name
      })
      return sourceData.nodes
    }

    // 默认样式配置
    const defaultStyle: Omit<FrontendNode, 'name' | 'description' | 'children'> = {
      symbolSize: 16,
      label: {
        fontSize: 16,
        color: '#000'
      },
      itemStyle: {
        color: '#ff0000',
        borderColor: '#0000ff',
        borderWidth: 3,
        normal: {
          color: '#00ff00'
        }
      },
      lineStyle: {
        color: '#888',
        width: 4,
        type: 'solid' // 设置为实线
      }
    }

    // 转换函数
    function transformData(data: BackendNode): FrontendNode {
      const transformNode = (node: BackendNode): FrontendNode => {
        const newNode: FrontendNode = {
          name: node.name,
          description: node.description || '',
          ...defaultStyle
        }

        if (node.children && node.children.length > 0) {
          newNode.children = node.children.map(child => transformNode(child))
        }

        return newNode
      }

      return transformNode(data)
    }

    const downloadImage = () => {
      if (chartRef.value) {
        // 获取 ECharts 实例
        const chartInstance = echarts.getInstanceByDom(chartRef.value)
        if (!chartInstance) {
          ElMessage.error('图表实例未找到，无法下载')
          return
        }

        // 获取整个图表的图片 URL
        const picUrl = chartInstance.getDataURL({
          pixelRatio: 2, // 提高图片的分辨率
          backgroundColor: '#fff' // 设置背景色
        })

        // 创建一个 a 标签用于下载
        const a = document.createElement('a')
        a.href = picUrl
        a.download = 'chart.png'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      }
    }

    return {
      store,
      goToDocumentIptPage,
      // graphVis
      // executeCypher,
      chartContainer,
      reloadChart,
      showReloadButton,
      downloadImage,
      generateWordCloud,
      wordcloudUrl,
      contentValues,
      chartRef,
      loading
    }
  }
}

function saveAs(src: any, arg1: string) {
  throw new Error('Function not implemented.')
}
</script>

<style lang="less" scoped>
.documentIpt_all {
  background-image: url(../assets/知识图谱图片2.png);
  background-size: cover;
}
.documentIpt_header {
  padding: 0;
  //background-image: url(../assets/课程知识图谱图片3.png);
  background-size: cover;
  position: relative;
  p {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-weight: 700;
    font-size: 74px;
  }
  .p_bottom {
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translateX(-50%);
    /deep/ .el-breadcrumb__item > span {
      color: #ffffff;
      font-size: 15px;
      font-weight: normal;
    }
  }
}
.documentIpt_main {
  padding: 0;
  height: 1100px;
  position: relative;

  .content_container {
    background-color: #b49c73;
    width: 1200px;
    height: 800px;
    position: absolute; /* 使用绝对定位 */
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%); /* 水平垂直居中 */
    border-radius: 10px; /* 设置圆角半径 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .content {
    background-color: white; /* 白色背景 */
    width: 98%; /* 宽度充满容器 */
    height: 98%; /* 高度充满容器 */
    border-radius: 10px; /* 设置圆角半径 */
    //padding: 20px; /* 内边距 */
    //box-sizing: border-box; /* 包括内边距和边框的尺寸 */
    display: flex; /* 使用flexbox布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    .reload-container {
      display: flex;
      align-items: center; /* 垂直居中 */
    }

    .reload-image {
      width: 200px; /* 根据您的图片大小调整宽度 */
      height: 200px; /* 根据您的图片大小调整高度 */
      margin-right: 10px; /* 在图片和文本之间添加一些空间 */
    }

    .reload-link {
      color: #007bff; /* 使用浅蓝色 */
      text-decoration: none; /* 去除下划线 */
      cursor: pointer; /* 设置鼠标悬停时的光标样式 */
    }
  }
  .buttons-container {
    display: flex;
    justify-content: center;
    gap: 200px; /* 添加按钮之间的间距 */
  }
  .documentIpt_btn {
    //margin-right: 300px;
    margin-top: 820px;
    width: 100px;
    height: 50px;
    background-color: #b49c73;
    border-color: #b49c73;
    color: black;
    font-size: 20px;
    font-weight: 800;
  }
}
</style>
